import {Control, IControlParams} from "./Control";
import {Dialog} from '../ui/Dialog';
import {Layer} from "../layer/Layer";
import {Slider} from "../ui/Slider";
import {Sun} from "./Sun";
import {ToggleButton} from "../ui/ToggleButton";
import {View} from '../ui/View';
import {Atmosphere} from "./Atmosphere";

interface ILightingParams extends IControlParams {

}

const SUN_STOP_SVG_ICON = `<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 122.88 70.41" style="enable-background:new 0 0 122.88 70.41" xml:space="preserve"><g><path d="M60.91,19.12c6.95,0,13.24,2.95,17.8,7.72c4.55,4.77,7.37,11.37,7.37,18.64c0,1.94-0.2,3.83-0.58,5.65h31.61 c2.1,0,2.62,1.16,2.62,2.59c0,1.43-0.52,2.59-2.62,2.59H7.09c-2.1,0-2.62-1.16-2.62-2.59c0-1.43,0.52-2.59,2.62-2.59h29.23 c-0.38-1.82-0.58-3.71-0.58-5.65c0-7.28,2.82-13.87,7.37-18.64C47.67,22.08,53.96,19.12,60.91,19.12L60.91,19.12L60.91,19.12z M63.4,70.41c-2.1,0-2.62-1.16-2.62-2.59s0.52-2.59,2.62-2.59h56.86c2.1,0,2.62,1.16,2.62,2.59s-0.52,2.59-2.62,2.59H63.4 L63.4,70.41z M2.62,70.41c-2.1,0-2.62-1.16-2.62-2.59s0.52-2.59,2.62-2.59h29.51c2.1,0,2.62,1.16,2.62,2.59s-0.52,2.59-2.62,2.59 H2.62L2.62,70.41z M38.39,9.46c-0.78-1.35-0.32-3.07,1.03-3.85c1.35-0.78,3.07-0.32,3.85,1.03l3.62,6.27 c0.78,1.35,0.32,3.07-1.03,3.85c-1.35,0.78-3.07,0.32-3.85-1.03L38.39,9.46L38.39,9.46L38.39,9.46z M58.67,2.83 c0-1.56,1.27-2.83,2.83-2.83c1.56,0,2.83,1.27,2.83,2.83v7.24c0,1.56-1.27,2.83-2.83,2.83c-1.56,0-2.83-1.26-2.83-2.83V2.83 L58.67,2.83L58.67,2.83z M79.56,7.23c0.77-1.35,2.49-1.81,3.84-1.04c1.35,0.77,1.81,2.49,1.04,3.84l-3.62,6.27 c-0.77,1.35-2.49,1.81-3.84,1.04c-1.35-0.77-1.81-2.49-1.04-3.84L79.56,7.23L79.56,7.23L79.56,7.23z M95.45,21.48 c1.35-0.78,3.07-0.32,3.85,1.03c0.78,1.35,0.32,3.07-1.03,3.85L92,29.98c-1.35,0.78-3.07,0.32-3.85-1.03 c-0.78-1.35-0.32-3.07,1.03-3.85L95.45,21.48L95.45,21.48L95.45,21.48z M102.08,41.76c1.56,0,2.83,1.27,2.83,2.83 c0,1.56-1.27,2.83-2.83,2.83h-7.24c-1.56,0-2.83-1.26-2.83-2.83s1.26-2.83,2.83-2.83H102.08L102.08,41.76L102.08,41.76z M19.74,46.25c-1.56,0-2.83-1.27-2.83-2.83c0-1.56,1.27-2.83,2.83-2.83h7.24c1.56,0,2.83,1.26,2.83,2.83s-1.27,2.83-2.83,2.83 H19.74L19.74,46.25L19.74,46.25z M24.14,25.35c-1.35-0.77-1.81-2.49-1.04-3.84c0.77-1.35,2.49-1.81,3.84-1.04l6.27,3.62 c1.35,0.77,1.81,2.49,1.04,3.84c-0.77,1.35-2.49,1.81-3.84,1.04L24.14,25.35L24.14,25.35L24.14,25.35z"/></g></svg>`;
const SUN_ACTIVE_SVG_ICON = `<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
    <path style="text-indent:0;text-align:start;line-height:normal;text-transform:none;block-progression:tb;-inkscape-font-specification:Sans" d="M 16 4 C 9.3844277 4 4 9.3844277 4 16 C 4 22.615572 9.3844277 28 16 28 C 22.615572 28 28 22.615572 28 16 C 28 9.3844277 22.615572 4 16 4 z M 16 6 C 16.389823 6 16.778223 6.0506339 17.15625 6.09375 C 18.631659 7.6568432 21 10.9245 21 16 C 21 21.0755 18.631659 24.343157 17.15625 25.90625 C 16.778223 25.949366 16.389823 26 16 26 C 10.465308 26 6 21.534692 6 16 C 6 10.465308 10.465308 6 16 6 z" overflow="visible" font-family="Sans"/>
</svg>
`;
const LIGHTING_ENABLED_SVG_ICON = `<?xml version="1.0" encoding="utf-8"?>
<!-- Generated by IcoMoon.io -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="512" height="512" viewBox="0 0 512 512">
<g>
</g>
\t<path d="M257.894 156.948c-53.258 0-96.42 43.561-96.42 97.26 0 53.719 43.161 97.249 96.42 97.249 53.197 0 96.379-43.53 96.379-97.25 0-53.698-43.182-97.26-96.379-97.26zM257.894 309.873c-30.464 0-55.163-24.945-55.163-55.665s24.699-55.624 55.163-55.624c30.423 0 55.101 24.904 55.101 55.624s-24.688 55.665-55.101 55.665z" fill="#000000" />
\t<path d="M241.808 43.499h32.144v79.575h-32.144v-79.575z" fill="#000000" />
\t<path d="M417.209 115.897l-22.723-22.917-55.757 56.279 22.723 22.907z" fill="#000000" />
\t<path d="M389.468 238.407h78.899v32.389h-78.899v-32.389z" fill="#000000" />
\t<path d="M396.012 416.86l22.723-22.917-55.767-56.259-22.712 22.897z" fill="#000000" />
\t<path d="M242.473 388.915h32.144v79.575h-32.144v-79.575z" fill="#000000" />
\t<path d="M96.266 396.073l22.722 22.938 55.778-56.289-22.692-22.928z" fill="#000000" />
\t<path d="M43.633 240.537h78.879v32.43h-78.879v-32.43z" fill="#000000" />
\t<path d="M115.394 93.051l-22.681 22.907 55.757 56.258 22.702-22.917z" fill="#000000" />
</svg>`;
const ATMOSPHERE_SVG_ICON = `<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="#000000" d="M135.688 18.5c-6.798 74.842-23.842 85.39-107.907 59.656 84.85 52.022 73.57 64.954-6.843 96.938 87.743-10.27 103.29 4.89 70.75 87.594 17.805-27.56 32.5-44.498 46.282-54.47-11.813 28.26-18.345 59.274-18.345 91.813 0 84.184 43.71 157.96 109.656 200.376-41.624-43.834-67.686-102.7-67.686-167.875 0-134.923 109.45-244.405 244.375-244.405 30.92 0 60.76 5.762 88 16.25-38.584-26.87-85.517-42.625-136.064-42.625-55.257 0-106.14 18.802-146.562 50.375 4.627-18.783 17.39-38.073 41.03-60.906C190.18 90.942 153.53 95.634 135.69 18.5zm10.03 77.188c5.67.002 11.428 1.247 16.876 3.874 14.506 6.998 22.72 21.81 22 36.938-10.26 10.87-19.507 22.696-27.594 35.344-9.035 2.753-19.075 2.27-28.25-2.156-19.37-9.343-27.5-32.6-18.156-51.97 6.715-13.92 20.638-22.036 35.125-22.03z"/></svg>`;


const TEMPLATE =
    `<div class="og-lighing">

         <div class="og-option">
           <div class="og-suncontrol"></div>
         </div>        
         
         <div class="og-option og-atmosphere-opacity">
         </div>
         
        <div class="og-lighting-emptyline"></div>

         <div class="og-option og-gamma"></div>         
         <div class="og-option og-exposure"></div>
       
        <div class="og-lighting-emptyline"></div>

         <div class="og-option">
         <div class="og-layers">
           <div class="og-caption">Select layer:</div>
           <select id="layers"></select>
         </div>
         </div>

         <div class="og-option og-opacity">
         </div>
         
         <div class="og-option og-night">
         </div>
         
         <div class="og-lighting-emptyline"></div>

         <div class="og-option og-diffuse">
         </div>
      
         <div class="og-option og-ambient">
         </div>

         <div class="og-option og-specular">
         </div>        

    </div>`;

const ICON_BUTTON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="256" height="256" viewBox="0 0 256 256" xml:space="preserve">

<defs>
</defs>
<g style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; opacity: 1;" transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)" >
\t<path d="M 45 68 c -12.682 0 -23 -10.317 -23 -23 c 0 -12.682 10.318 -23 23 -23 c 12.683 0 23 10.318 23 23 C 68 57.683 57.683 68 45 68 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
\t<path d="M 45 17.556 c -1.657 0 -3 -1.343 -3 -3 V 3 c 0 -1.657 1.343 -3 3 -3 c 1.657 0 3 1.343 3 3 v 11.556 C 48 16.212 46.657 17.556 45 17.556 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
\t<path d="M 45 90 c -1.657 0 -3 -1.343 -3 -3 V 75.444 c 0 -1.657 1.343 -3 3 -3 c 1.657 0 3 1.343 3 3 V 87 C 48 88.657 46.657 90 45 90 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
\t<path d="M 14.556 48 H 3 c -1.657 0 -3 -1.343 -3 -3 c 0 -1.657 1.343 -3 3 -3 h 11.556 c 1.657 0 3 1.343 3 3 C 17.556 46.657 16.212 48 14.556 48 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
\t<path d="M 87 48 H 75.444 c -1.657 0 -3 -1.343 -3 -3 c 0 -1.657 1.343 -3 3 -3 H 87 c 1.657 0 3 1.343 3 3 C 90 46.657 88.657 48 87 48 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
\t<path d="M 66.527 26.473 c -0.768 0 -1.535 -0.293 -2.121 -0.878 c -1.172 -1.172 -1.172 -3.071 0 -4.243 l 8.171 -8.171 c 1.172 -1.172 3.07 -1.171 4.242 0 c 1.172 1.172 1.172 3.071 0 4.243 l -8.171 8.171 C 68.063 26.18 67.295 26.473 66.527 26.473 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
\t<path d="M 15.302 77.698 c -0.768 0 -1.536 -0.293 -2.121 -0.879 c -1.172 -1.171 -1.172 -3.071 0 -4.242 l 8.171 -8.171 c 1.171 -1.172 3.071 -1.172 4.242 0 c 1.172 1.171 1.172 3.071 0 4.242 l -8.171 8.171 C 16.837 77.405 16.069 77.698 15.302 77.698 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
\t<path d="M 23.473 26.473 c -0.768 0 -1.536 -0.293 -2.121 -0.878 l -8.171 -8.171 c -1.172 -1.172 -1.172 -3.071 0 -4.243 c 1.172 -1.172 3.072 -1.171 4.243 0 l 8.171 8.171 c 1.172 1.172 1.172 3.071 0 4.243 C 25.008 26.18 24.24 26.473 23.473 26.473 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
\t<path d="M 74.698 77.698 c -0.768 0 -1.535 -0.293 -2.121 -0.879 l -8.171 -8.171 c -1.172 -1.171 -1.172 -3.071 0 -4.242 c 1.172 -1.172 3.07 -1.172 4.242 0 l 8.171 8.171 c 1.172 1.171 1.172 3.071 0 4.242 C 76.233 77.405 75.466 77.698 74.698 77.698 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
</g>
</svg>`;

const MAX_COLOR = 5;

/**
 * Helps to set up lighting.
 */
export class Lighting extends Control {
    protected _selectedLayer: Layer | null;
    protected _toggleBtn: ToggleButton;
    protected _dialog: Dialog<null>;
    protected _panel: View<null>;

    protected _atmosphereMaxOpacity: Slider;
    protected _atmosphereMinOpacity: Slider;
    protected _gamma: Slider;
    protected _exposure: Slider;
    protected _night: Slider;
    protected _opacity: Slider;
    protected _diffuse_r: Slider;
    protected _diffuse_g: Slider;
    protected _diffuse_b: Slider;
    protected _ambient_r: Slider;
    protected _ambient_g: Slider;
    protected _ambient_b: Slider;
    protected _specular_r: Slider;
    protected _specular_g: Slider;
    protected _specular_b: Slider;
    protected _shininess: Slider;

    public $gamma: HTMLElement | null;
    public $exposure: HTMLElement | null;
    public $night: HTMLElement | null;
    public $opacity: HTMLElement | null;
    public $diffuse: HTMLElement | null;
    public $ambient: HTMLElement | null;
    public $specular: HTMLElement | null;
    public $atmosphereOpacity: HTMLElement | null;


    constructor(options: ILightingParams = {}) {
        super(options);

        this._selectedLayer = null;

        this._toggleBtn = new ToggleButton({
            classList: ["og-map-button", "og-lighting_button"],
            icon: ICON_BUTTON_SVG
        });

        this._dialog = new Dialog({
            title: "Lighting Parameters",
            visible: false,
            useHide: true,
            top: 60,
            left: 60,
            width: 600
        });

        this._dialog.events.on("visibility", (v: boolean) => {
            this._toggleBtn.setActive(v);
        });

        this._panel = new View({
            template: TEMPLATE
        });

        this.$gamma = null;
        this.$exposure = null;
        this.$night = null;
        this.$opacity = null;
        this.$diffuse = null;
        this.$ambient = null;
        this.$specular = null;
        this.$atmosphereOpacity = null;

        this._atmosphereMaxOpacity = new Slider({
            label: "Max.opacity",
            max: 5
        });

        this._atmosphereMinOpacity = new Slider({
            label: "Min.opacity",
            max: 5
        });

        this._gamma = new Slider({
            label: "Gamma",
            max: 5
        });

        this._exposure = new Slider({
            label: "Exposure",
            max: 5
        });

        this._night = new Slider({
            label: "Nightlight",
            max: 5
        });

        this._opacity = new Slider({
            label: "Opacity",
            max: 1
        });

        //
        // Diffuse sliders
        //
        this._diffuse_r = new Slider({
            label: "Diffuse R",
            max: MAX_COLOR
        });

        this._diffuse_g = new Slider({
            label: "Diffuse G",
            max: MAX_COLOR
        });

        this._diffuse_b = new Slider({
            label: "Diffuse B",
            max: MAX_COLOR
        });

        //
        // Ambient sliders
        //
        this._ambient_r = new Slider({
            label: "Ambient R",
            max: MAX_COLOR
        });

        this._ambient_g = new Slider({
            label: "Ambient G",
            max: MAX_COLOR
        });

        this._ambient_b = new Slider({
            label: "Ambient B",
            max: MAX_COLOR
        });

        //
        // Specular sliders
        //
        this._specular_r = new Slider({
            label: "Specular R",
            max: 0.2
        });

        this._specular_g = new Slider({
            label: "Specular G",
            max: 0.2
        });

        this._specular_b = new Slider({
            label: "Specular B",
            max: 0.2
        });

        this._shininess = new Slider({
            label: "Shininess",
            max: 100
        });
    }

    public bindLayer(layer: Layer) {
        this._selectedLayer = layer;
        this._opacity.value = layer.opacity;
        this._update();
    }

    public override oninit() {

        this._toggleBtn.appendTo(this.renderer!.div!);
        this._dialog.appendTo(this.renderer!.div!);
        this._panel.appendTo(this._dialog.container!);

        if (this._panel.el) {
            this.$atmosphereOpacity = this._panel.el.querySelector(".og-atmosphere-opacity");
            this.$gamma = this._panel.el.querySelector(".og-option.og-gamma");
            this.$exposure = this._panel.el.querySelector(".og-option.og-exposure");
            this.$opacity = this._panel.el.querySelector(".og-option.og-opacity");
            this.$diffuse = this._panel.el.querySelector(".og-option.og-diffuse");
            this.$ambient = this._panel.el.querySelector(".og-option.og-ambient");
            this.$specular = this._panel.el.querySelector(".og-option.og-specular");
            this.$night = this._panel.el.querySelector(".og-option.og-night");
        }

        this._toggleBtn.events.on("change", (isActive: boolean) => {
            this._dialog.setVisibility(isActive);
        });

        let $suncontrol = this._dialog.select(".og-suncontrol")!;

        let sunStopBtn = new ToggleButton({
            classList: ["og-suncontrol-button"],
            isActive: true,
            icon: SUN_STOP_SVG_ICON,
            title: "Star/stop the Sun from following the camera"
        });
        sunStopBtn.appendTo($suncontrol);

        let sunActiveBtn = new ToggleButton({
            classList: ["og-suncontrol-button"],
            isActive: true,
            icon: SUN_ACTIVE_SVG_ICON,
            title: "Activate/deactivate the Sun current time positioning"
        });
        sunActiveBtn.appendTo($suncontrol);

        sunStopBtn.events.on("change", (isActive: boolean) => {
            const sun = this.planet!.renderer!.controls.sun as Sun;
            if (isActive) {
                sun.start();
            } else {
                sun.stop();
            }
        });

        sunActiveBtn.events.on("change", (isActive: boolean) => {
            const sun = this.planet!.renderer!.controls.sun;
            if (isActive) {
                sun.activate();
            } else {
                sun.deactivate();
            }
        });

        let lightingEnabledBtn = new ToggleButton({
            classList: ["og-suncontrol-button"],
            isActive: this.planet!.lightEnabled,
            icon: LIGHTING_ENABLED_SVG_ICON,
            title: "Enable/disable planet lighting"
        });
        lightingEnabledBtn.appendTo($suncontrol);

        lightingEnabledBtn.events.on("change", (isActive: boolean) => {
            this.planet!.lightEnabled = isActive;
        });

        let atmosphereEnabledBtn = new ToggleButton({
            classList: ["og-suncontrol-button"],
            isActive: this.planet!.atmosphereEnabled,
            icon: ATMOSPHERE_SVG_ICON,
            title: "Enable/disable atmosphere scattering"
        });
        atmosphereEnabledBtn.appendTo($suncontrol);

        if (this.planet!.atmosphereEnabled) {
            this.$atmosphereOpacity!.style.display = "block";
        } else {
            this.$atmosphereOpacity!.style.display = "none";
        }
        atmosphereEnabledBtn.events.on("change", (isActive: boolean) => {
            this.planet!.atmosphereEnabled = isActive;
            if (this.planet!.atmosphereEnabled) {
                this.$atmosphereOpacity!.style.display = "block";
            } else {
                this.$atmosphereOpacity!.style.display = "none";
            }
        });

        this._atmosphereMaxOpacity.appendTo(this.$atmosphereOpacity!);
        this._atmosphereMinOpacity.appendTo(this.$atmosphereOpacity!);

        this._gamma.appendTo(this.$gamma!);
        this._exposure.appendTo(this.$exposure!);

        this._night.appendTo(this.$night!);
        this._opacity.appendTo(this.$opacity!);

        this._diffuse_r.appendTo(this.$diffuse!);
        this._diffuse_g.appendTo(this.$diffuse!);
        this._diffuse_b.appendTo(this.$diffuse!);

        this._ambient_r.appendTo(this.$ambient!);
        this._ambient_g.appendTo(this.$ambient!);
        this._ambient_b.appendTo(this.$ambient!);

        this._specular_r.appendTo(this.$specular!);
        this._specular_g.appendTo(this.$specular!);
        this._specular_b.appendTo(this.$specular!);
        this._shininess.appendTo(this.$specular!);

        this._atmosphereMinOpacity.value = this.planet!.atmosphereMinOpacity;
        this._atmosphereMinOpacity.events.on("change", (val: number) => {
            this.planet!.atmosphereMinOpacity = val;
        });

        this._gamma.value = this.planet!.renderer!.gamma;
        this._gamma.events.on("change", (val: number) => {
            this.planet!.renderer!.gamma = val;
        });

        this._panel.el!.querySelector<HTMLSelectElement>("#layers")!.addEventListener("change", (e: Event) => {
            const l = this.planet!.getLayerByName((e.target as HTMLSelectElement).value);
            if (l) {
                this.bindLayer(l);
            }
        });

        this._atmosphereMaxOpacity.value = this.planet!.atmosphereMaxOpacity;
        this._atmosphereMaxOpacity.events.on("change", (val: number) => {
            this.planet!.atmosphereMaxOpacity = val;
            let atmos = this.planet!.renderer!.controls.Atmosphere as Atmosphere;
            atmos.opacity = val;
        });

        this._exposure.value = this.planet!.renderer!.exposure;
        this._exposure.events.on("change", (val: number) => {
            this.planet!.renderer!.exposure = val;
        });

        this._night.events.on("change", (val: number) => {
            if (this._selectedLayer) {
                this._selectedLayer.nightTextureCoefficient = val;
            }
        });

        this._opacity.events.on("change", (val: number) => {
            if (this._selectedLayer)
                this._selectedLayer.opacity = val;
        });

        this._ambient_r.events.on("change", (val: number) => {
            if (this._selectedLayer && this._selectedLayer._ambient)
                this._selectedLayer._ambient[0] = val
        });

        this._ambient_g.events.on("change", (val: number) => {
            if (this._selectedLayer && this._selectedLayer._ambient)
                this._selectedLayer._ambient[1] = val
        });

        this._ambient_b.events.on("change", (val: number) => {
            if (this._selectedLayer && this._selectedLayer._ambient)
                this._selectedLayer._ambient[2] = val
        });

        this._diffuse_r.events.on("change", (val: number) => {
            if (this._selectedLayer && this._selectedLayer._diffuse)
                this._selectedLayer._diffuse[0] = val
        });

        this._diffuse_g.events.on("change", (val: number) => {
            if (this._selectedLayer && this._selectedLayer._diffuse)
                this._selectedLayer._diffuse[1] = val
        });

        this._diffuse_b.events.on("change", (val: number) => {
            if (this._selectedLayer && this._selectedLayer._diffuse)
                this._selectedLayer._diffuse[2] = val
        });

        this._specular_r.events.on("change", (val: number) => {
            if (this._selectedLayer && this._selectedLayer._specular)
                this._selectedLayer._specular[0] = val
        });

        this._specular_g.events.on("change", (val: number) => {
            if (this._selectedLayer && this._selectedLayer._specular)
                this._selectedLayer._specular[1] = val
        });

        this._specular_b.events.on("change", (val: number) => {
            if (this._selectedLayer && this._selectedLayer._specular)
                this._selectedLayer._specular[2] = val
        });

        this._shininess.events.on("change", (val: number) => {
            if (this._selectedLayer && this._selectedLayer._specular)
                this._selectedLayer._specular[3] = val
        });


        if (this.planet) {
            this.planet!.events.on("layeradd", this._onLayerAdd, this);
            this.planet!.events.on("layerremove", this._onLayerRemove, this);
        }

        this._fetchLayers();
    }

    protected _update() {
        let l = this._selectedLayer;

        this._opacity.value = l && l.opacity ? l.opacity : 0.0;

        this._night.value = l && l.nightTextureCoefficient ? l.nightTextureCoefficient : this.planet!.nightTextureCoefficient;

        let a = l && l._ambient ? l._ambient : this.planet!._ambient;
        this._ambient_r.value = a[0];
        this._ambient_g.value = a[1];
        this._ambient_b.value = a[2];

        let d = l && l._diffuse ? l._diffuse : this.planet!._diffuse;
        this._diffuse_r.value = d[0];
        this._diffuse_g.value = d[1];
        this._diffuse_b.value = d[2];

        let s = l && l._specular ? l._specular : this.planet!._specular;
        this._specular_r.value = s[0];
        this._specular_g.value = s[1];
        this._specular_b.value = s[2];
        this._shininess.value = s[3];
    }

    protected _fetchLayers() {
        if (this.planet) {
            for (let i = 0; i < this.planet.layers.length; i++) {
                this._onLayerAdd(this.planet.layers[i]);
            }
        }
    }

    protected _onLayerAdd(e: Layer) {
        this.bindLayer(e);
        let opt = document.createElement("option");
        opt.value = e.name;
        opt.innerText = e.name;
        this._panel.el!.querySelector("#layers")!.appendChild(opt);
        this._panel.el!.querySelector<HTMLSelectElement>("#layers")!.value = e.name;
    }

    protected _onLayerRemove(e: Layer) {
    }
}
